<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/system" replace>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>系统用户</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">系统用户</div>
      <div class="searchBox">
        <el-form :model="searchObject" size="mini" inline>
          <div class="block">
            <el-form-item>
              <el-button type="primary" icon="el-icon-circle-plus" @click="addSysUser">新增</el-button>
            </el-form-item>
          </div>
          <div class="block">
            <el-form-item label="手机号查询">
              <el-input v-model="searchObject"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" circle @click="search"></el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <el-table :data="tableData">
        <el-table-column prop="" label="编号" align="center"></el-table-column>
        <el-table-column prop="" label="系统账号" align="center"></el-table-column>
        <el-table-column prop="" label="真实姓名" align="center"></el-table-column>
        <el-table-column prop="" label="部门" align="center"></el-table-column>
        <el-table-column prop="" label="邮箱" align="center"></el-table-column>
        <el-table-column prop="" label="是否推送" align="center"></el-table-column>
        <el-table-column prop="" label="财务分类" align="center"></el-table-column>
        <el-table-column prop="" label="错误次数" align="center"></el-table-column>
        <el-table-column prop="" label="入职日期" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="data">
            <el-button size="mini" type="primary" @click="leaveOffice(data.row)"></el-button>
            <el-button size="mini" type="primary" @click="edit(data.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :maxTotal="maxTotal" @handleSize="handleSizeChange" @handleCurrent="handleCurrentChange"></pagination>
      <div class="addSysUser" v-if="showAddSysUser">
        <el-form size="mini" :model="sysUserOption" label-width="100px">
          <el-form-item label="系统账号">
            <el-input v-model="sysUserOption.mobile"></el-input>
            <span>请手机号做为账号</span>
          </el-form-item>
          <el-form-item label="系统密码">
            默认密码:123456 请及时修改密码
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="sysUserOption.name"></el-input>
          </el-form-item>
          <el-form-item label="部门">
            <el-select v-model="sysUserOption.department">
              <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入职日期">
            <el-date-picker type="datetime" v-model="sysUserOption.time" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="sysUserOption.email"></el-input>
            <span>请仔细确认格式是否正确</span>
          </el-form-item>
          <el-form-item label="是否推送">
            <el-select v-model="sysUserOption.status">
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import pagination from 'components/pagination'

  export default {
    data () {
      return {
        maxTotal: 10,
        searchObject: '',
        tableData: [],
        showAddSysUser: false,
        sysUserOption: {},
        departmentOptions: [],
        statusOptions: [
          {
            value: 0,
            label: '否'
          },
          {
            value: 1,
            label: '是'
          }
        ]
      }
    },
    created () {
    },
    methods: {
      search () {
      },
      onSubmit () {
      },
      leaveOffice (item) {
      },
      handleSizeChange (val) {
      },
      handleCurrentChange (val) {
      },
      addSysUser () {
        this.sysUserOption = {}
        this.showAddSysUser = !this.showAddSysUser
      },
      edit (item) {
        this.showAddSysUser = true
        this.sysUserOption = item
      }
    },
    components: {
      pagination
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .addSysUser {
    padding: 20px 20px 0;

    .el-form {
      .el-form-item {
        .el-input {
          width: 20%;
        }
      }
    }
  }
</style>
